<!DOCTYPE html>
<html>
<title></title>
<style>
	/* 不同像素屏宽适配 320 375 414 */
	/*@media only 某种彩色设备 */
	@media screen and (max-width: 320px) {}

	@media only screen and (min-width: 321px) and (max-width : 375px) {}

	@media only screen and (min-width: 376px) {}




	/* 比率适配dpr */

	/**
			前提条件
		 	<html lang="en" data-dpr="1" style="font-size: 54px;">

			[data-dpr="1"] & {  
			} 
            [data-dpr="2"] & {  
			} 
            // for mx3 
            [data-dpr="2.5"] & { 
            } 
            // for 小米note 
            [data-dpr="2.75"] & { 
            } 
            [data-dpr="3"] & { 
            } 
            // for 三星note4 
            [data-dpr="4"] & { 
            } 
            } 
        */
	[data-dpr="1"] div {
		color: red;
	}

	[data-dpr="2"] div {
		color: green;
	}

	[data-dpr="3"] div {
		color: gray;
	}

	/**
		ratio适配
	*/
	@media screen and (-webkit-min-device-pixel-ratio: 2) {}
	@media (-webkit-min-device-pixel-ratio: 3),
	(min-device-pixel-ratio: 3) {}


	/**
	postcss-write-svg
	*/
	

</style>
</head>

<body>
	<div>1234455</div>
</body>

</html>